<template>
  <div class="btn">
    <button v-has-show="'shop:create'">创建</button>
    <button v-has-show="'shop:edit'">编辑</button>
    <button v-has-show="'shop:delete'">删除</button>
  </div>
</template>
<script setup lang="ts">
import {Directive, ref} from 'vue'
//模拟登录用户
localStorage.setItem("userId",'001')
//模拟后台返回权限
const permission = [
  '001:shop:create',
  '001:shop:edit',
  '001:shop:delete'
]
const userId = localStorage.getItem('userId') as string
const vHasShow:Directive<HTMLElement,string> = (el,binding) => {
  console.log(el,binding)
  if(!permission.includes(userId+":"+binding.value)){
    el.style.display = 'none'
  }
}

</script>

<style scoped lang="less">
.btn{
  button{
    margin: 10px;
  }
}
</style>
